<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景局部清晰</title>
		<style>
			/*背景局部清晰*/
			.bg{
			    width:100vw;
			    height:100vh;
			    position: relative;
			    background: url("image/image_1.jpg") no-repeat fixed;
				background-size: 100% 100%;
			    padding:1px;
			    box-sizing:border-box;
			}
			.bg:after{
			    content: "";
			    width:100%;
			    height:100%;
			    position: absolute;
			    left:0;
			    top:0;
			    background: inherit;
			    filter: blur(9px);
			    z-index: 1;
				border-radius: 10px;
			}
			.drag{
			    position: absolute;
			    left:40%;
			    top:30%;
			    /*transform: translate(-50%,-50%);*/
			    width:200px;
			    height:200px;
			    text-align: center;
				border-radius: 20px;
			    background: inherit;
			    z-index:11;
			
			    box-shadow:  0 0 10px 6px rgba(0,0,0,0.5);
			}
			
			/* ————————————————
			版权声明：本文为CSDN博主「csu_zipple」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
			原文链接：https://blog.csdn.net/csu_passer/article/details/78406702 */
		</style>
	</head>
	<body>
		<div class="bg">
		   <div class="drag">
		        <div>like window</div>
		   </div>
		</div>
	</body>
</html>